<template>
  <div class='header'>
  <div class='header-left'>
  <div class='iconfont icon-back'>&#xe624</div>
  </div>
  <div class='header-input'>
  <span class='iconfont'>&#xe632</span>
  输入城市/景点/游玩主题
  </div>
  <router-link to='/city'>
  <div class='header-right'>
  {{this.doubleCity}}
  <span class='iconfont arrow-icon'>&#xe64a</span>
  </div>
  </router-link>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
  name: 'HomeHeader',
  computed:{
  	...mapState(['city']),
  	...mapGetters(['doubleCity'])
  }
}
</script>
<style lang='stylus' scoped>
@import '~styles/varibles.styl'
.header
	line-height:0.86rem
	display:flex
	background:$bgColor
	color:#fff
	.header-left
		width:0.64rem
		float:left
		.icon-back
			text-align:center
			font-size:0.4rem
	.header-input
		flex:1
		height:0.64rem
		background:#fff
		border-radius:0.1rem
		margin-top:0.12rem
		margin-left:0.2rem
		line-height:0.64rem
		color:#ccc
		padding-left:0.2rem
	.header-right
		min-width:1.24rem
		float:right
		text-align:center
		color:#fff
		padding-left:0.05rem
		.arrow-icon
			font-size:0.24rem
			margin-left:-0.08rem

</style>
